<template>
  <div>
    <card v-if="showTitle" class="insure-card" title="操作记录" :showDivider="false" />
    <table-index class="insure-card-table" :table="table" @loadData="loadData">
      <template #log="{ record }">
        <div v-for="item in record.contentList" :key="item">
          <div v-if="item.includes('url')">
            <span v-for="(i, index) in JSON.parse(item)" :key="index" class="flex-row">
              <div v-for="(el, elIndex) in i.content" :key="elIndex">
                {{ el }}
                <span class="col-img" @click="previewFn(i.url[elIndex])" v-if="i.url[elIndex]">查看</span>
              </div>
            </span>
          </div>
          <p v-else>{{ item }}</p>
        </div>
      </template>
    </table-index>
    <a-image-preview-group v-model:visible="previewVisible" v-model:current="previewCurrent" :maskClosable="false" :srcList="previewList" />
  </div>
</template>

<script setup>
  import { reactive, onMounted, ref } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getOperateLog } from '@/api/common'

  const props = defineProps({
    id: {
      type: [String, Number],
    },
    type: {
      type: [String, Number],
    },
    showTitle: Boolean,
    list: {
      type: Array,
      default: () => [
        { title: '操作人', dataIndex: 'userName', width: 180 },
        {
          title: '操作时间',
          dataIndex: 'operateTime',
          width: 180,
        },
        { title: '操作节点', dataIndex: 'node', width: 130 },
        { title: '变更内容', slotName: 'log' },
      ],
    },
  })

  const queryParam = reactive({})
  const table = useTable({
    columns: props.list,
  })

  const loadData = useFetchTableDataApi(table, queryParam, getOperateLog)

  const previewVisible = ref(false)
  const previewCurrent = ref(0)
  const previewList = ref([])
  const previewFn = (url) => {
    previewCurrent.value = 0
    previewVisible.value = true
    previewList.value = [url]
  }

  onMounted(() => {
    queryParam.bizId = props.id
    queryParam.bizType = props.type
    loadData()
  })
</script>
<style scoped lang="less">
  .col-img {
    color: #165dff;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
  }
  .flex-row {
    display: flex;
  }
</style>
